<template>
  <div style="height: 100vh">
    <el-container>
      <el-header>
        <Header></Header>
      </el-header>
      <el-container>
        <el-main>
          <!--
          prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
          -->
          <!-- direction="vertical"-->

          <el-col :span="12">
            <div class="table">
              <div class="sontable">
                <h1>找回用户名/密码</h1>
                <el-divider></el-divider>

                <div>
                  <el-form :model="param" :rules="rules" ref="login" label-width="80px">

                    <el-form-item label="密码重置验证码" prop="sfz">
                      <el-input type="text" placeholder="输入密码重置验证码" size="small"
                                prefix-icon="el-icon-user"
                                v-model="param.eyzm"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="sfz">
                      <el-input type="text" placeholder="输入6位以上的密码。" size="small"
                                prefix-icon="el-icon-user"
                                v-model="param.password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="sfz">
                      <el-input type="text" placeholder="再输入一遍密码。" size="small"
                                prefix-icon="el-icon-user"
                                v-model="param.qrpassword"></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="Submit">找回用户名/密码</el-button>
                  </el-form>
                </div>


              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div style="margin-left: 10px;margin-top: 100px">
              <el-card width="300px">
                <span>注意</span>
                <p>我们会将用户名及密码重置的链接一并发送到您的注册时的电子邮箱
                  <br/>注意：根据身份证号仅能找回本招生年度（2021）注册的用户名和密码
                  <br/>一天之内发送重置密码链接不能超过5次. </p>
              </el-card>
            </div>
          </el-col>
        </el-main>
      </el-container>
      <el-foot>
        <Footer></Footer>
      </el-foot>
    </el-container>
  </div>
</template>

<script>

import Header from "@/components/Header";
import Footer from "@/components/Footer";
import ElementUI from "element-ui";

export default {
  name: "Forgetpass",
  components: { Header, Footer},
  data(){
    return {
      type:"",
      username:"",
      param:{
        eyzm:"",
        password:"",
        qrpassword:"",
      },
      //定义校验规则
      rules:{
        eyzm:[
          {required:true,message:"请输入邮箱收到的验证码",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ],
        qrpassword:[
          {required:true,message:"请再输入密码",trigger:"blur"}
        ],
      }
    }
  },
  methods:{
    Submit(){
      console.log(this.$store.state.username)
      //解决axios提交到后端为null的情况
      let params = new URLSearchParams();
      params.append('username',this.$store.state.username);
      params.append('password', this.param.password);
      params.append('eyzm', this.param.eyzm);

      this.axios({
        method: 'post',
        url:"modifypass",
        withCredentials:true,
        data:params,
        dataType:'JSONP',  // 处理Ajax跨域问题,
      }).then((response) => {
        /*
        * {'msg':'ok'}
        * {'msg':'fail','error':'密码重置码错误'}
        */
        console.log(response.data)

        console.log(response.data['msg'])
        if( response.data['msg'] == "ok"){        //账户密码正确
          // 设置全局user
          this.$store.commit('login', response.data)
          ElementUI.Message({
            message: '密码重置成功，5秒后返回首页',
            type: 'success'
          });
          setTimeout(
              //这里写5秒后的
              this.$router.push("/login")         //跳转到登录页面
              , 5000);

        }else{      //修改失败
          ElementUI.Message({
            message: '密码重置失败，'+response.data['error']+"，请重试",
            type: 'error'
          });
        }

      })
    }
  }
}
</script>

<style lang="less" scoped>

/*表单那块——注册*/
.table{
  margin-top:20px;
  margin-left: 20px;
  width: 600px;
  font-size:14px;
  line-height:34px;
}
.sontable{
  margin-top:100px;
  margin-left:300px;
}
.el-card{
  width: 270px;
  height: 320px;
  margin-top:100px;
  margin-left:150px;
span{
  font-weight: bolder;
}
p{
  margin-top:20px;
  font-size:14px;
  color:#424242;
  line-height:34px;
}
}
.el-input{
  width:240px;
}
</style>